<template>
    <div class="exam-page flex-col">
        <div class="exam-selected-section flex-col">
            <div class="exam-option-group flex-row justify-between">
                <div class="exam-option" v-for="option in options" :key="option.value"
                    @click="selectOption(option.value)" :class="{ selected: selectedOption === option.value }">
                    {{ option.label }}
                </div>
            </div>
            <div class="center-box">
                <span class="exam-list-title">推荐竞赛</span>
                <el-form inline="true" class="exam-navigation flex-row justify-between">
                    <el-form-item label="竞赛时间" prop="datetimerange" class="exam-navigation-box">
                        <el-date-picker style="width:360px;" v-model="params.datetimerange" type="datetimerange"
                            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="onSearch" plain type="primary">搜索</el-button>
                        <el-button @click="onReset" plain type="info">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- </div> -->
                <div class="exam-list-group flex-row">
                    <div class="exam-list-item flex-col" v-for="(exam, index) in examList" :key="index">
                        <div>
                            <img src="@/assets/images/exam.png">
                        </div>
                        <div class="right-info">
                            <span class="exam-title">{{ exam.title }}</span>
                            <div class="exam-content flex-col justify-between">
                                <span>开赛时间：{{ exam.startTime }}</span>
                                <span>结束时间：{{ exam.endTime }}</span>
                            </div>
                            <div class="exam-button-container">
                                <span class="exam-hash-entry"
                                    v-if="isOngoingAndUnregisteredCompetition(exam)">已开赛</span>
                                <span class="exam-hash-entry" v-if="isEntryAndNotStart(exam)">已报名</span>
                                <div v-if="isHistoryExam(exam)">
                                    <el-button class="exam-practice-button" type="primary" plain
                                        @click="goExam(exam)">竞赛练习</el-button>
                                    <el-button class="exam-rank-button" type="primary" plain
                                        @click="togglePopover(exam.examId)">查看排名</el-button>
                                </div>
                                <el-button class="exam-start-button" type="primary" plain v-if="isStartExam(exam)"
                                    @click="goExam(exam)">开始答题</el-button>
                                <el-button class="exam-enter-button" type="primary" plain v-if="isCanEntry(exam)"
                                    @click="enterExam(exam.examId)">报名参赛</el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="exam-page-pagination flex-row">
                    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
                        v-model:current-page="params.pageNum" v-model:page-size="params.pageSize"
                        :page-sizes="[3, 6, 9, 12]" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </div>

    <el-dialog v-model="dialogVisible" width="600px" top="30vh" :show-close="true" :close-on-click-modal="false"
        :close-on-press-escape="false" class="oj-login-dialog-centor" center>
        <el-table :data="examRankList">
            <el-table-column label="排名" prop="examRank" />
            <el-table-column label="用户昵称" prop="nickName" />
            <el-table-column label="用户得分" prop="score" />
        </el-table>
        <el-pagination class="range_page" background layout="total, sizes, prev, pager, next, jumper" :total="rankTotal"
            v-model:current-page="rankParams.pageNum" v-model:page-size="rankParams.pageSize"
            :page-sizes="[5, 10, 15, 20]" @size-change="handleRankSizeChange"
            @current-change="handleRankCurrentChange" />
    </el-dialog>

</template>

<script setup>
import { reactive, ref } from 'vue'
import { getExamListService, enterExamService, getExamRankListService } from '@/apis/exam'
import { getToken } from '@/utils/cookie'
import { getUserInfoService } from '@/apis/user'
import router from '@/router';

//参数定义
const examList = ref([]) //题目列表
const total = ref(0)
const selectedOption = ref(0); // 初始化选中的文本
const options = ref([
    { label: '未完赛', value: 0 },
    { label: '历史竞赛', value: 1 },
])
const params = reactive({
    pageNum: 1,
    pageSize: 9,
    type: 0,
    datetimerange: []  // 用于存储选择的时间范围
})

//竞赛列表
async function getExamList() {
    const result = await getExamListService(params)
    examList.value = result.rows
    total.value = result.total
}
getExamList()

async function selectOption(type) {
    selectedOption.value = type
    params.pageNum = 1
    params.type = type
    getExamList()
}

// 搜索/重置
function onSearch() {
    if (params.datetimerange && params.datetimerange.length === 2) {
        // 格式化时间为 'YYYY-MM-DD 00:00:00'
        params.startTime = formatDate(params.datetimerange[0]);
        params.endTime = formatDate(params.datetimerange[1]);

        // 清空 datetimerange
        delete params.datetimerange;
    } else {
        delete params.startTime;
        delete params.endTime;
    }

    console.log(params);  // 查看格式化后的参数
    params.pageNum = 1;
    getExamList();
}

// 转换后端想要的格式
function formatDate(date) {
    const d = new Date(date);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
    const day = String(d.getDate()).padStart(2, '0');
    return `${year}-${month}-${day} 00:00:00`;  // 时间部分固定为 00:00:00
}

// 重置
function onReset() {
    // 重置搜索条件
    params.pageNum = 1
    params.pageSize = 9
    params.type = 0

    // 清空时间范围并确保前端页面上不展示任何日期
    params.datetimerange = null  // 或者 params.datetimerange = []

    getExamList()
}

// 分页
function handleSizeChange(newSize) {
    params.pageNum = 1
    getExamList()
}

function handleCurrentChange(newPage) {
    getExamList()
}

function isOngoingAndUnregisteredCompetition(exam) {
    const now = new Date(); //当前时间
    return new Date(exam.startTime) < now && new Date(exam.endTime) > now && !exam.enter
}

function isEntryAndNotStart(exam) {
    const now = new Date();
    return new Date(exam.startTime) > now && exam.enter
}

function isHistoryExam(exam) {
    const now = new Date();
    return new Date(exam.endTime) < now;
}

function isStartExam(exam) {
    const now = new Date();
    return new Date(exam.startTime) < now && new Date(exam.endTime) > now && exam.enter;
}

function isCanEntry(exam) {
    const now = new Date();
    return new Date(exam.startTime) > now && !exam.enter;
}

const isLogin = ref(false)
async function checkLogin() {
    if (getToken()) {
        await getUserInfoService()
        isLogin.value = true
    }
}

async function enterExam(examId) {
    await checkLogin()
    if (!isLogin.value) {
        ElMessage.error('请先登录后报名参赛,谢谢')
        return
    }
    const enterExamDTO = ref({
        examId: examId
    })
    await enterExamService(enterExamDTO.value)
    ElMessage.success('您已报名成功，请按时参赛',)
    getExamList() //报名成功后刷新竞赛列表
}

function goExam(exam) {
    //需要后端提供一个获取竞赛中第一道题目的id接口
    router.push(`/c-oj/anwser?examId=${exam.examId}&examTitle=${exam.title}&examEndTime=${exam.endTime}`)
}

const rankParams = reactive({
    examId: '',
    pageNum: 1,
    pageSize: 9,
})
const examRankList = ref([])
const rankTotal = ref(0)

// 分页
function handleRankSizeChange(newSize) {
    rankParams.pageNum = 1
    getExamRankList()
}

function handleRankCurrentChange(newPage) {
    getExamRankList()
}

const dialogVisible = ref(false)

async function getExamRankList() {
    const result = await getExamRankListService(rankParams)
    examRankList.value = result.rows
    rankTotal.value = result.total
}

function togglePopover(examId) {
    dialogVisible.value = true
    rankParams.examId = examId
    getExamRankList()
}

</script>

<style lang="scss" scoped>
.exam-page {
    background-color: rgba(247, 247, 247, 1);
    position: relative;
    overflow: hidden;
    display: flex;

    .center-box {
        max-width: 1520px;
        margin: 0 auto;
        width: 100%;
        min-height: 368px;
        background: #FFFFFF;
        border-radius: 16px;
        padding: 0 20px;
        padding-top: 30px;
        margin-top: 10px;
    }

    .exam-selected-section {
        margin: 0 auto;
        margin-bottom: 20px;
        position: relative;
        padding-top: 50px;
        max-width: 1520px;
        width: 100%;

        .exam-option-group {
            width: fit-content;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;

            .exam-option {
                cursor: pointer;
                padding: 10px;
                border-bottom: 2px solid transparent;
                transition: all 0.3s ease;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 18px;
                color: #222;
                height: 50px;
                width: fit-content;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 20px;
            }

            .exam-option.selected {
                color: #32C5FF;
                border-bottom: 2px solid #32C5FF;
            }
        }

        .exam-list-title {
            height: 24px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 18px;
            color: #222222;
            line-height: 25px;
            text-align: left;
            margin-bottom: 30px;
            display: block;
        }

        :deep(.exam-navigation) {
            width: 554px;
            height: 40px;
            font-size: 100px;
            margin-bottom: 30px;

            .el-form-item {
                margin-right: 20px;
            }

            .el-form-item__label {
                background: #fff;
            }

            .exam-navigation-box {
                background-color: rgba(242, 243, 244, 1);
                border-radius: 6px;
                height: 30px;
                // width: 460px;
                font-weight: 700;
            }
        }

        .exam-list-group {
            // width: 1200px;
            flex-wrap: wrap;

            @media screen and (min-width: 1420px) {
                .exam-list-item {
                    width: 32%;

                    &:nth-of-type(3n) {
                        margin-right: 0;
                    }
                }

            }

            @media screen and (max-width: 1419px) {
                .exam-list-item {
                    width: 48%;
                    margin-right: 2%;

                    &:nth-of-type(2n) {
                        margin-right: 0;
                    }
                }
            }

            @media screen and (max-width: 970px) {
                .exam-list-item {
                    width: 100%;
                    margin-right: 0;
                }
            }

            .exam-list-item {
                height: 220px;
                background: #F9F9F9;
                border-radius: 10px;
                margin-right: 2%;
                margin-bottom: 20px;
                padding: 20px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                flex-direction: row;
                justify-content: space-between;
                cursor: pointer;

                .right-info {
                    width: calc(100% - 146px);
                }

                .exam-title {
                    height: 26px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 18px;
                    color: #222222;
                    line-height: 26px;
                    text-align: left;
                    max-width: 90%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-bottom: 16px;
                    display: block;
                }

                .exam-content {
                    margin-bottom: 26px;

                    span {
                        height: 22px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 16px;
                        color: #666666;
                        line-height: 22px;
                        display: block;
                        margin-bottom: 12px;
                    }

                }

                img {
                    width: 126px;
                    height: 180px;
                    border-radius: 6px;
                }

                &:hover {
                    background: #fff;
                    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);

                    .exam-title {
                        color: #32C5FF;
                    }

                    .el-button {
                        background: #f7f7f7;
                    }
                }

                .exam-hash-entry {
                    float: right;
                    font-size: 18px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999;
                }

                .exam-button-container {
                    display: flex;
                    justify-content: space-between;
                    /* 或者使用 flex-start 来紧密排列按钮 */
                    align-items: center;

                    /* 如果需要垂直居中 */
                    /* 其他样式，如外边距、内边距等 */
                    .el-button {
                        width: 120px;
                        height: 44px;
                        background: #F7F7F7;
                        border-radius: 4px;
                        border: 1px solid #32C5FF;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 18px;
                        color: #32C5FF;
                        line-height: 44px;
                        text-align: center;
                    }
                }
            }
        }

        .exam-page-pagination {
            width: 594px;
            height: 40px;
            margin: 30px 0 73px 800px;
        }
    }
}
</style>